<template>
	<view style="padding: 20rpx;">
		<!-- 输入区域 -->
		<view class="text-area" style="margin-bottom: 20rpx;">
			<text>输入值:</text>
			<input type="text" v-model="title" style="border: 1px solid #ccc; padding: 10rpx; width: 200rpx; color: red;" />
		</view>
		
		<!-- 回传值区域 -->
		<view class="text-area" style="margin-bottom: 20rpx;">
			<text>回传值:</text>
			<input type="text" v-model="callBackValue" style="border: 1px solid #ccc; padding: 10rpx; width: 200rpx; color: black;" />
		</view>
		
		<!-- 子组件A -->
		<comA :intent="title" style="background: #f9c784; padding: 20rpx; border-radius: 10rpx; margin-bottom: 20rpx;" />
		
		<!-- 子组件B -->
		<comB @callBackFun="callBack" style="background: #b8e994; padding: 20rpx; border-radius: 10rpx;" />
	</view>
</template>

<script>
	import comA from '../../components/compA.vue'
	import comB from '../../components/compB.vue'
	export default {
		components: { comA, comB }, // 注册组件
		data() {
			return {
				title: '',       // 输入值
				callBackValue: ''// 回传值
			}
		},
		methods: {
			callBack(msg) {
				console.warn("---index---callBack-->" + msg);
				this.callBackValue = msg;
			}
		}
	}
</script>

<style>
.text-area {
	display: flex;
	align-items: center;
	gap: 10rpx;
}
</style>